<template>
  <div class="emoji" v-clickoutside="hideFace">
    <img @click="faceShow = !faceShow" src="./png/face.png" alt="">

    <div v-if="faceShow" class="face-container">
      <ul>
        <li v-for="(item, index) in faceList" :key="index">
          <span @click="selectFace(item)" v-html="item.dec" :title="item.dec"></span>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import Clickoutside from 'element-ui/src/utils/clickoutside'

export default {
  name: "emoji",
  directives: { Clickoutside },
  props: {
    sample: {
      type: Object,
    },
  },
  data() {
    return {
      faceList:[
        { dec: '😀' },
        { dec: '😁' },
        { dec: '😂' },
        { dec: '😃' },
        { dec: '😄' },
        { dec: '😅' },
        { dec: '😇' },
        { dec: '😈' },
        { dec: '😉' },
        { dec: '😊' },
        { dec: '😋' },
        { dec: '😌' },
        { dec: '😍' },
        { dec: '😎' },
        { dec: '😏' },
        { dec: '😐' },
        { dec: '😑' },
        { dec: '😒' },
        { dec: '😓' },
        { dec: '😔' },
        { dec: '😕' },
        { dec: '😖' },
        { dec: '😗' },
        { dec: '😘' },
        { dec: '😙' },
        { dec: '😚' },
        { dec: '😛' },
        { dec: '😜' },
        { dec: '😝' },
        { dec: '😞' },
        { dec: '😟' },
        { dec: '😠' },
        { dec: '😡' },
        { dec: '😢' },
        { dec: '😣' },
        { dec: '😤' },
        { dec: '😥' },
        { dec: '😦' },
        { dec: '😧' },
        { dec: '😨' },
        { dec: '😩' },
        { dec: '😪' },
        { dec: '😫' },
        { dec: '😬' },
        { dec: '😭' },
        { dec: '😮' },
        { dec: '😯' },
        { dec: '😰' },
        { dec: '😱' },
        { dec: '😲' },
        { dec: '😳' },
        { dec: '😴' },
        { dec: '😵' },
        { dec: '😶' },
        { dec: '😷' },
        { dec: '🙁' },
        { dec: '🙂' },
        { dec: '🙃' },
        { dec: '🙄' },
        { dec: '🤐' },
        { dec: '🤑' },
        { dec: '🤒' },
        { dec: '🤓' },
        { dec: '🤔' },
        { dec: '🤕' },
        { dec: '🤠' },
        { dec: '🤡' },
        { dec: '🤢' },
        { dec: '🤣' },
        { dec: '🤤' },
        { dec: '🤥' },
        { dec: '🤧' },
        { dec: '🤨' },
        { dec: '🤩' },
        { dec: '🤪' },
        { dec: '🤫' },
        { dec: '🤬' },
        { dec: '🤭' },
        { dec: '🤮' },
        { dec: '🤯' },
        { dec: '🧐' }
      ],
      faceShow: false,
    }
  },
  methods:{
    //选择表情
    selectFace (item) {
      this.$emit('sendEmoji', item.dec)
    },
    hideFace (params) {
      this.faceShow = false
    }
  }
}

</script>



<style lang="scss" scoped>
  div.emoji {
    display: inline-block;
    position: relative;
    img {
      width: 24px;
      cursor: pointer;
      margin-right: 10px;
      vertical-align: middle;
    }

    .face-container {
      position: absolute;
      top: -165px;
      left: -10px;
      padding: 5px;
      box-shadow: 0 0 5px 1px rgb(225, 225, 225);
      z-index: 101;
      background: #fff;
      ul {
        list-style: none;
        padding-left: 0;
        display: flex;
        width: 340px;
        height: 120px;
        flex-wrap: wrap;
        overflow-y: auto;
      }
      span {
        cursor: pointer;
        font-size: 24px;
      }
    }
  }
</style>
